<template>
  <div class="show-blow" v-theme="'wide'">
    <h1>博客总览</h1>
    <input v-model="search" placeholder="搜索" />

    <!-- <div class="single-blog" v-for="(item,index) in blogs" :key="index"> -->
    <!-- 这里要触发computed才能进行搜索 -->
    <div class="single-blog" v-for="(item,index) in fileterBlogs" :key="index">
      <!-- 跳转到有id号 id号的页面已经重新设置了 -->
      <router-link :to="'/blog/' + item.id">
        <h1 v-rainbow>{{item.id}}</h1>
        <h5 v-rainbow>{{item.title | to-uppercase}}</h5>
      </router-link>

      <!-- 引用的是自定义过滤器的方法 -->
      <!-- <article v-rainbow>{{item.body | to-uppercase}}</article> -->
      <article v-rainbow>{{item.content | snippet }}</article>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      blogs: [],
      search: ""
    };
  },
  created() {
    // this.$http.get("https://jsonplaceholder.typicode.com/posts")
    axios
      .get("posts.json")

      .then(data => {
        // console.log(data.json());
        // return data.json();
        return data.data;
        // this.$http.get("./../../static/posts.json").then(data => {
        //   console.log(data);
        //   slice分割条数注意对数组有用，对象的话会报错！
        // this.blogs = data.body.slice(0, 20);
        //   console.log(this.blogs);
      })
      .then(data => {
        let dataArry = [];
        for (let key in data) {
          //   console.log(key);
          //   console.log(data[key]);
          //   加多一个id,等于里面的key
          data[key].id = key;
          dataArry.push(data[key]);
        }
        console.log(dataArry);
        this.blogs = dataArry;
      });
  },
  //   值发生变化就要使用computed
  computed: {
    fileterBlogs() {
      return this.blogs.filter(blog => {
        // 过滤出bolgs的title和搜索的东西所做的一个匹配
        return blog.title.match(this.search);
      });
    }
  },
  methods: {}
};
</script>